<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card" style="border:none;">
                    <div class="card-body">
                        <h3 :style="{ fontSize: site.video_title_size + 'px' }">{{site.video_title}} </h3>
                        <div class="container">
                            <video class="w-100" autoplay controls :src="video_link" style="object-fit: fill;"></video>
                        </div>
                        <div>
                            <div class="d-inline-flex m-1 p-1" v-for="ad in ads" :style="{border: '1px solid ' + ad.border_color}">
                                <a :href="ad.link" :style="{ fontSize: ad.size + 'px', color: ad.color }">{{ad.title}}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import MtaH5 from 'mta-h5-analysis'
    export default {
        created() {
            // MtaH5 统计
            MtaH5.init({
                "sid":'500673179', //必填，统计用的appid
                "cid":'500673182', //如果开启自定义事件，此项目为必填，否则不填
                "autoReport":0,//是否开启自动上报(1:init完成则上报一次,0:使用pgv方法才上报)
                "senseHash":0, //hash锚点是否进入url统计
                "senseQuery":0, //url参数是否进入url统计
                "performanceMonitor":0,//是否开启性能监控
                "ignoreParams":[] //开启url参数上报时，可忽略部分参数拼接上报
            })
            MtaH5.pgv()
        },
        mounted() {
            document.title = this.title
            this.get_info()
        },
        data() {
            return {
                title: '默认标题',
                video_link: 'https://yixie.oss-cn-hangzhou.aliyuncs.com/example.mp4',
                ads:[],
                site:[],
                videos:[]
            }
        },
        props: ['url'],
        methods: {
            get_info() {
                let _this = this
                axios.get(this.url)
                .then(function (response) {
                    if (response.status === 200) {
                        let data = response.data
                        _this.ads = data.datas.ads
                        _this.site = data.datas.site
                        _this.videos = data.datas.videos
                        document.title = data.datas.site.title
                        MtaH5.clickStat(data.datas.site.user_id ,{})
                    }
                })
            }
        }
    }
</script>
